<template>
  <el-tabs :tab-position="tabPosition" style="height: 440px;">
    <el-tab-pane v-if="this.$store.state.user.roleName === '学生'" label="请假记录" >
      <el-table
        ref="filterTable"
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        style="width: 100%"
        :default-sort="{prop:'ask_Id',order:'descending'}"
        stripe
        @selection-change="selected"
        max-height="1000"
      >
        <el-table-column fixed type="selection" width="55"></el-table-column>
        <el-table-column prop="userName" label="用户账号" width="100"></el-table-column>
        <el-table-column prop="nickName" label="用户姓名" width="100"></el-table-column>
        <el-table-column prop="duration" sortable label="请假期限" width="150"></el-table-column>
        <el-table-column prop="status" label="请假状态" width="150"></el-table-column>
        <el-table-column prop="reason" label="请假原因" width="150" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column sortable v-if="false" prop="ask_Id" label="考勤id" width="150"></el-table-column>
        <el-table-column sortable v-if="false" prop="user_Id" label="用户id" width="150"></el-table-column>
        <el-table-column prop="startTime" :formatter="dateFormat" label="开始时间" width="150"></el-table-column>
        <el-table-column prop="endTime" :formatter="dateFormat" label="结束时间" width="150"></el-table-column>
        <el-table-column prop="comment" label="备注" width="120"></el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :current-page="currentPage"
          :page-sizes="[3,6,8,10,20,100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        ></el-pagination>
      </div>
    </el-tab-pane>
    <el-tab-pane label="请假申请">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="学生姓名" v-if="this.$store.state.user.roleName === '管理员'">
          <el-select
            v-model="form.userId"
            filterable
            clearable
            resize
            placeholder="请选择"
            style="width: 100%;"
          >
            <el-option
              v-for="item in studentData"
              :key="item.user_Id"
              :label="item.userName+'-'+item.nickName"
              :value="item.user_Id"
            >
              <i class="el-icon-user-solid">{{item.userName+'-'+item.nickName}}</i>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生姓名" v-if="this.$store.state.user.roleName === '学生'">
          <el-input
            prefix-icon="el-icon-user"
            clearable
            resize
            :value="this.$store.state.user.userName+'-'+this.$store.state.user.nickName"
          ></el-input>
        </el-form-item>
        <el-form-item label="请假期限">
          <el-input prefix-icon="el-icon-date" clearable resize v-model="form.duration"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <!-- <el-col :span="11"> -->
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
            placeholder="选择请假开始时间"
            default-time="12:00:00"
            style="width: 100%;"
          ></el-date-picker>
          <!-- </el-col> -->
          <!-- <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="选择时间" v-model="time1" style="width: 100%;"></el-time-picker>
          </el-col>-->
        </el-form-item>
        <el-form-item label="结束时间">
          <!-- <el-col :span="11"> -->
          <el-date-picker
            v-model="form.endTime"
            type="datetime"
            placeholder="选择请假结束时间"
            default-time="12:00:00"
            style="width: 100%;"
          ></el-date-picker>
          <!-- </el-col> -->
          <!-- <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="选择时间" v-model="time2" style="width: 100%;"></el-time-picker>
          </el-col>-->
        </el-form-item>
        <el-form-item label="请假原因">
          <el-input type="textarea" clearable resize v-model="form.reason"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">立即申请</el-button>
          <el-button @click="goBack">取消</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import moment from 'moment'
export default {
  inject: ['reload'],
  data () {
    return {
      userId: this.$store.state.user.userId,
      studentData: [],
      pageSize: 6,
      currentPage: 1,
      tableData: [],
      selectedCheckBox: [],
      tabPosition: 'top', // tab标签位置
      form: {
        userId: '',
        duration: '',
        startTime: '',
        endTime: '',
        reason: '',
        status: '未批阅'
      }
    }
  },
  created () {
    this.initData()
    this.getStudentData()
    this.roleSelect()
  },
  methods: {
    selected: function (value) {
      // 复选框获取已经被选择的记录
      this.selectedCheckBox = value
    },
    dateFormat (row, column) {
      // 修改时间格式
      var date = row[column.property]

      if (date === undefined) {
        return ''
      } else if (date === null) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    handleSizeChange (val) {
      this.currentPage = 1
      this.pageSize = val
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.currentPage = val
      console.log(`当前页: ${val}`)
    },
    roleSelect () {
      if (this.$store.state.user.roleName === '学生') {
        this.form.userId = this.$store.state.user.userId
      }
    },
    goBack () {
      // 点击跳转至上次浏览页面
      if (this.$store.state.user.roleName === '管理员') {
        this.$router.replace('/askForLeaveManagement')
      } else {
        this.$router.replace('/index')
      }
    },
    handleAdd: function () {
      // 执行添加请假信息方法
      // alert(JSON.stringify(this.form))
      if (this.form != null) {
        this.$axios
          .post('/leaves', {
            json: this.form
          })
          .then(response => {
            if (response.data.code === 200) {
              // alert(JSON.stringify(response.data));
              setTimeout(() => {
                // var obj = JSON.parse(JSON.stringify(response.data.data))
                this.$message({
                  message: '申请成功',
                  type: 'success'
                })
                this.getStudentData()
                this.initInsert()
                this.reload()
              }, 300)
            } else {
              this.$message({
                message: '申请失败',
                type: 'warning'
              })
            }
          })
          .catch(function (error) {
            // 请求失败处理
            console.log(error)
          })
      }
    },
    initInsert () {
      this.form.userId = ''
      this.form.duration = ''
      this.form.startTime = ''
      this.form.endTime = ''
      this.form.reason = ''
    },
    getStudentData () {
      // 获取学生信息
      this.$axios
        .get('/leaves/studentInfos')
        .then(response => (this.studentData = response.data.data))
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    },
    initData () {
      // 初始化数据
      this.$axios
        .post('/leaves/askForLeaveByUserId', {
          json: this.userId
        })
        .then(response => (this.tableData = response.data.data))
        .catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
    }
  }
}
</script>
